import React, { Component } from 'react'

import { fromJS } from 'immutable'

import { bindActionCreators } from 'redux'
import { connect } from 'react-redux'
import themeHOC from '../../common/themeHOC'

import { intl } from '../../../intl/intl'
import { formatDecimal, formatValue } from '../../../utils/dataUtils'

import { pollAssets } from '../../../redux/actions/tradeAssetsAction'

import './account.less'

@connect(state => {
  return {
    currentContract: state.trade.market.get('currentContract'),
    assets: state.trade.assets.get('assets')
  }
}, dispatch => {
  return bindActionCreators({
    pollAssets
  }, dispatch)
})
@themeHOC
class Account extends Component {
  constructor (props) {
    super(props)
    this.accountDatas = [
      { key: 'account_equity', valueKey: 'Balance' },
      { key: 'realized_profit_loss', valueKey: 'CloseProfit' },
      // { key: 'unrealized_profit_loss', valueKey: 'PositionProfit' },
      { key: 'can_used', valueKey: 'Available' },
      { key: 'has_used', valueKey: 'UseMargin' },
      { key: 'freeze', valueKey: 'FrozenMargin' }
    ]
  }

  componentDidMount () {
    this.props.pollAssets()
  }

  render () {
    const { theme, assets, currentContract } = this.props
    const currency = formatValue(currentContract, 'ClearCurrency')
    const currentAssets = formatValue(assets, currency, fromJS({}))
    return (
      <div
        className={`trade-column-bottom trade-account-${theme}`}>
        <p
          datatype="single"
          className="trade-column-content-title">
          {currency}{intl('assets')}
        </p>
        <ul
          className="trade-account-list-container">
          {
            this.accountDatas.map(data => {
              return (
                <li
                  key={data.key}
                  className="trade-account-list-row">
                  <span>{intl(data.key)}</span>
                  <span>{formatDecimal(formatValue(currentAssets, data.valueKey), 8)}</span>
                </li>
              )
            })
          }
        </ul>
      </div>
    )
  }
}

export default Account
